<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        选择器速查
    </title>
<!--内部样式-->
    <style >
        /*<!--标签名选择器*/
       h4{
        color: #ba1e1e;
    }
        /*id选择器：根据标签的id属性值选择*/
        #d1{
            color: azure;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    /* class 类选择器：根据class的属性值 */
        .error{
            background-color: rebeccapurple;
        }
        .msg{
            background-color: #ba1e1e;
        }
    /*    4.并列选择器表示同时满足条件才可以*/
        #d1:hover{
            background-color: yellow;
        }
        /*5.群组选择器：用逗号隔开，选择多个节点*/
        #d1,#d2,h4,.error{border: 3px solid red;}
        /*6.伪类选择*/
        /* 链接未被访问*/
        a:link{
             color:gray
         }
        /*被访问的*/
        a:visited{
            color: #ba1e1e;
        }
        /*鼠标悬停*/
        a:hover{
            color: black;
        }
        /*鼠标按下*/
        a:active{
            color:greenyellow ;
        }
    /*7属性选择器*/
        input[type="text"]{
            border: 3px solid burlywood;
        }
    /*8.通用选择器*/
        *{font-style: italic}
    /*9.后代选择器*/
    #d2 span{
        color: #ba1e1d;
    }
    /*10.子代选择器*/
        #d2>div>p>span{
            color:blue;
        }
    </style>

</head>
<body>
<div id="d1">我是div</div>
<div>我是div</div>
<p>我是段落</p>
<h4>我是标题</h4>
<h4>我是标题</h4>
<hr>
<span class="error msg">用户名不能为空</span>
<span class="error msg">密码必须在6~12位之间</span>
<span class="success msg">手机号格式正确</span>
<span class="success msg">邮箱格式正确</span>
<hr>
<a href="https://www.baidu.com">超链接1</a>
<a href="https://www.tmooc.cn">超链接2</a>
<hr>
<input type="text" name="uname">
<input type="text" name="nickname">
<select name="uname">
    <option value="1"></option>
    <option value="2"></option>
</select>
<hr>
<div id="d2">
    <span>111</span>
    <div>
        <span>222</span>
        <p>测试文字</p>
        <p>我是<span>333</span>段落</p>
    </div>
    <span>444</span>
</div>

</body>
</html>